<template>
  <el-header style="display: flex; align-items: center; font-size: 12px; width: auto;">
    <div class="toolbar" style="display: flex; justify-content: space-between; width: 100%;">
      <el-icon><Fold /></el-icon>
      <div style="width: 300px; text-align: center;">
        <span style="font-family: STXingkai; font-size: 25px;">仓库管理系统</span>
      </div>

      <div style="display: flex; align-items: center; gap: 16px;">
        <span>{{currentUsername}}</span>
        <el-icon><SwitchButton  @click="centerDialogVisible = true" />  </el-icon>
      </div>
    </div>
  </el-header>
  <el-dialog v-model="centerDialogVisible" title="Warning" width="500" center  >
    <el-button  type="warning" style="width: 300px;margin-left: 85px">
      确认退出登录吗？
    </el-button>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="success" @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="logout">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Fold, Setting, SwitchButton } from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
const router = useRouter()

let currentUser = ref(JSON.parse(localStorage.getItem('currentUser')));
let currentUsername = currentUser.value.username;
const centerDialogVisible = ref(false)

function logout() {
  centerDialogVisible.value=false
  router.replace({ name: 'login' })
  currentUser.value = null
  localStorage.clear()
}
</script>